<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=1.3&key=fNltnrt8GrS5fYuirz0uGIXgznCyZml9"></script>
<script type="text/javascript" src="${request.contextPath}/js/jquery-1.8.0.js"></script>
<link href="${request.contextPath}/js/ztree/css/demo.css" rel="stylesheet" />
<link rel="stylesheet" href="${request.contextPath}/js/ztree/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${request.contextPath}/js/ztree/jquery.ztree.core.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${request.contextPath}/js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${request.contextPath}/js/themes/icon.css">
<script type="text/javascript" src="${request.contextPath}/js/jquery.easyui.min.1.2.2.js"></script>
<script src="${request.contextPath}/js/vue/vue.min.js" charset="utf-8"></script>
</head>
<body>
	<div style="width: 1485px; height: 800px; border: 1px solid gray"
		id="container"></div>
	<div data-options="region:'east',iconCls:'icon-reload',split:true"
		style="position: absolute; top: 0px; left: 1487px; width: 232px; height: 800px; border: 5px; bacrground-color: #FAF8AB">
		<div>
			<table class="easyui-datagrid" title="司法部门信息"
				style="width: 232px; height: 15px">
			</table>
			<div style="width: 220px; height: 355px; overflow: auto;">
				<ul id="jub" class="ztree" style="width: 220px; height: 355px;"></ul>
			</div>
			</div>
		<table id="tt"></table>
		<div style="width: 220px; height: 367px; overflow: auto;">
			<table border="2px" id="vm">
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>电话</td>
					<td>状态</td>
				</tr>
				<tr v-for="item in result">
					<td><input type="checkbox" name="checkbox-id"></td>
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.phonenum"></td>
					<td v-text="item.state"></td>
				</tr>
			</table>
		</div>

		<input type="button" value="人员定位"
			style="width: 116px; background-color: #98EBFD; border-radius: 12%"
			onclick="place()" id="loca" /><input type="button"
			style="width: 116px; background-color: #98EBFD; border-radius: 12%"
			value="最后位置" onclick="pla()" id="oloca" />
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el : '#vm',
			data : {
				result : []
				
			}
		});
		//获取ztree字节点的值
		function zTreeOnClick(treeId, treeNode, clickFlag) {
			$.ajax({
				url : '${request.contextPath}/usermap/loca',
				data : {
					id : clickFlag.id
				},
				success : function(res) {
					vm.result = res.data;
				}
			});
		}
		var zNodes = [];
		var setting = {
			view : {
				showLine : false
			},
			callback : {
				onClick : zTreeOnClick
			},
			data : {
				simpleData : {
					enable : true
				}
			}
		}
		var getDepts = function() {
			$.ajax({
				url : "${request.contextPath}/usermap/judic",
				success : function(result) {
					zNodes = result.data;
					$.fn.zTree.init($("#jub"), setting, zNodes);
				}
			});
		}
		$(document).ready(function() {
			getDepts();
		});	

	</script>

</body>
<script type="text/javascript" >
var $td;
function mymethod(){
	var $check = $("table").find(":checkbox").filter(":checked");
	// 找到选中的复选框所在的行  
	var $tr = $check.eq(0).parent().parent();
	// 找到此行中的某个td   
	$td = $tr.find("td").eq(1).text();
	if ($td == "") {
				alert("请选择人员后在操作..");
			}
}
function mapps(res){
var lon = res.data[0].longitude;
	var lat = res.data[0].latitude;
	 var add = res.data[0].adds;	
	if (lon == null || lat == null) {
		alert("此人暂时无更新信息")
	}
	var point = new BMap.Point(lon, lat); // 创建点坐标  
	map.centerAndZoom(point, 15);//初始化地图，设置中心点坐标和地图别
	var marker = new BMap.Marker(point);
	map.clearOverlays();
	var opts = {
		//width : 250,     // 信息窗口宽度       
		//height: 100,     // 信息窗口高度       
		title : "<span style='font-size:15px;color:#FF0000;background-color:#FFFFFF'>位置</span>" // 信息窗口标题     		
	}
	var infoWindow = new BMap.InfoWindow(
			"<span style='font-size:15px;color:blue;background-color:#FFFFFF'>"+add+"</span>",
			opts); // 创建信息窗口对象       
	map.openInfoWindow(infoWindow, map.getCenter());
	map.addOverlay(marker);// 实例化标注,并添加到地图中

}
var map = new BMap.Map("container"); // 创建地图实例  
var longitude = "113.549805";//经度  
var latitude = "34.808465";//纬度  
var point = new BMap.Point(longitude, latitude); // 创建点坐标  
map.centerAndZoom(point, 15);//初始化地图，设置中心点坐标和地图别
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件  		
map.addControl(new BMap.MapTypeControl());//添加卫星视图
map.addControl(new BMap.CopyrightControl());//添加版本号
map.addControl(new BMap.ScaleControl());//添加放大、缩小控件  
map.enableScrollWheelZoom();//允许鼠标滑轮操作  
map.addEventListener("click", function(e) {
	var point = new BMap.Point(e.point.lng, e.point.lat);
	var marker = new BMap.Marker(point);
	map.addOverlay(marker);
});
$('#tt').datagrid({
	title : '人员信息',
	/*	url:"${request.contextPath}/usermap/loca&id=3",*/
	width : 232,
	height : 15,
	fitColumns : true,
	nowrap : false,
	columns : [ [

	] ],
});

function place() {
	 mymethod();
	$.ajax({
		url : '${request.contextPath}/usermap/uuser',
		data : {
			id : $td
		},
		success : function(res) {
	mapps(res);
		}
	});

}
function pla() {
	var add;
    mymethod();
	$.ajax({
		url : '${request.contextPath}/usermap/correct',
		data : {
			id : $td
		},
		success : function(res) {		
			mapps(res);
		}
	});
}</script>
</html>